<template>
    <div class="bg-List">
        <div class="header" id="sell-height">
            <img src="../../images/left.png" alt="" @click="$router.go(-1)">

                <span v-if="is_newcomer == 1">新手任务大厅</span>
                <span v-else-if="is_newcomer == 0" >
                      <span v-if="platform_id == 1" >淘宝任务大厅</span>
                      <span v-else-if="platform_id == 2" >京东任务大厅</span>
                      <span v-else-if="platform_id == 3" >拼多多任务大厅</span>
                </span>
                <span v-else-if="is_newcomer == 2">限时专属任务大厅 <em class="lv">限制放宽</em></span>


            <select name="" id="consumersTab" v-model="consumer_id">
                <option :value="consumers.consumer_id" v-for="consumers in consumersTab">{{ consumers.login }}</option>
            </select>
        </div>


        <div class="swiper-container swiper1 swiper-container-horizontal swiper-container-free-mode"
             v-if="is_newcomer == 0 || is_newcomer == 2" id="sell-height1">
            <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
                <div class="swiper-slide" :value="type.type" v-on:click="setData(type.type,type, type.tag, index)"
                     v-for="(type, index) in typesname"
                     :class="{active: activeName == type.type, 'active-return': type.tag == 'return' && type.num >= 1}">
                    <p>{{ type.name }}</p>
                    <!--<p class="numbertype"><span>{{ type.num }}</span>-->
                    <!--</p>-->
                </div>
            </div>
        </div>
        <p v-if="returnTureas" class="returnTureas">您有【{{ returnTureas }}】个回访任务 请尽快领取并完成</p>
        <!--<p class="is_newcomerHead" v-if="is_newcomer == 1" id="sell-height2">仅新手可以领取</p>-->
        <!--<div class="is_newcomerHead Head-nocome clearfix" v-else-if="is_newcomer == 0 || is_newcomer == 2" id="sell-height2">-->
        <!--<ul>-->
        <!--<li>进行中 <span>{{ message.going }}</span></li>-->
        <!--&lt;!&ndash;<li>待审核 <span>{{ message.audit }}</span></li>&ndash;&gt;-->
        <!--<li style="color:#FE096B;padding-right: 0">未通过 <span>{{ message.not_pass }}</span></li>-->
        <!--</ul>-->
        <!--<p class="fr Head-nocome-right" v-if="message.not_pass">{{ time }}后自动放弃</p>-->
        <!--<p class="fr Head-nocome-right" v-else><span-->
        <!--style="display: inline-block;padding-top: 0.05rem">如未通过请修改提交</span></p>-->
        <!--</div>-->
        <div class="mutlist" style="overflow-y: scroll;" :style="{ height: screen }">
            <my-load-more :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"
                          :auto-fill="false" ref="loadmore" bottomPullText="更多">

                <div class="mutlist_body" id="mutlist_body" :style="{ height: height_scoll }">

                    <!-- <div style="text-align: center;font-size: 0.4rem;margin-top: 0.5rem;" v-if="is_length">
                        <img src="../../images/11.png" alt="" style="width: auto; height: 2rem;display: inline-block;">
                    </div> -->

                    <div>
                        <div v-if="!returnTure">
                            <div class="goodWokrs clearfix" v-for="task in tasks" v-if="task.list">
                                <img src="../../images/questionIcon.png" alt="" class="questionIcon"
                                     v-if="task.list && task.list.question != null">
                                <div class="titleH3 fl" v-if="task.list.image">
                                    <!--<h3 class="Bigcolor">{{ task.list.type }}</h3>-->
                                    <img :src="task.list.image" v-if="task.list.image.indexOf('http') != -1" />
                                    <img :src=" qiniu_domain +task.list.image" v-else />
                                </div>
                                <div class="titleH3 fl" v-else >
                                    <img src="@/images/defaultImg.png" />
                                </div>
                                <div class="fr_workText fl">
                                    <div class="Numlists">
                                        <div class="linder">
                                            <!--<div class="titleNewimg">-->
                                            <!--<img src="../../images/homese1.png"/>-->
                                            <!--<span>{{ task.list.goods_title }}</span>-->
                                            <!--</div>-->
                                            <div class="workNeed" v-if="task.list.sort != '1000000000'">
                                                <span class="tj">每做<i>{{ lottery_min_recommend_get }}个</i>推荐任务 奖励<i>{{ lottery_min_recommend_get_number }}次</i>抽奖</span>
                                            </div>
                                            <div class="workNeed" v-else>
                                                <span v-if="task.list.type != '自定义任务'">{{ task.list.items }}</span>
                                                <span v-else>领取后显示任务要求</span>
                                            </div>
                                            <div class="moneyYmoney">
                                                <!-- @click="toastdata(task.list.user_money, task.list.sort)" -->
                                                <span>￥{{ task.list.user_money }}</span>
                                                <em class="reward" v-if="task.list.reward">
                                                    <ul>
                                                        <li>加赏</li>
                                                        <!-- <li>加赏{{ task.list.reward.job_meta_value }}</li> -->
                                                    </ul>
                                                </em>
                                                <img src="@/images/privilege-jifen.png" style="margin-left: 0.5rem"/>
                                                <span style="color: #FA7B84" v-if="task.list.sort == '1000000000'">{{ finish_work_credit }}</span>
                                                <span style="color: #FA7B84" v-else>{{ credit_multiple }}</span>
                                                <span class="tuijian" v-if="task.list.sort != '1000000000'">推荐</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="fr_btnPutwork">
                                    <button v-on:click="submit(task.list.work_id, task.list.type)">领取任务</button>
                                </div>
                            </div>
                        </div>
                        <div v-else id="return-body">
                            <div class="goodWokrs clearfix" v-for="task in tasks">
                                <img src="../../images/questionIcon.png" alt="" class="questionIcon"
                                     v-if="task.question && task.question != 'NULL'">
                                <div class="titleH3 fl" v-if="task.image">
                                    <!--<h3 class="Bigcolor" v-if="task.type.text">{{ task.type.text }}</h3>-->
                                    <img :src="task.image.url" v-if="task.image.url.indexOf('http') != -1"/>
                                    <img :src=" qiniu_domain +task.image.url" v-else/>
                                </div>
                                <div class="fr_workText fl">
                                    <div class="Numlists">
                                        <div class="linder">
                                            <!--<div class="titleNewimg">-->
                                            <!--<img src="../../images/homese1.png"/>-->
                                            <!--<span>{{ task.goods.goods_title }}</span>-->
                                            <!--</div>-->
                                            <div class="workNeed">
                                                <span>领取后查看任务的要求以及佣金</span>
                                            </div>
                                            <div class="moneyYmoney">
                                                <span>???</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p></p>
                                <div class="fr_btnPutwork">
                                    <button v-on:click="submit(task.job_id)">领取任务</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <img src="../../images/notask.png" width="100%">
                </div>

                <!--<template slot="bottom">-->
                <!--<div id="distinct-body" v-if="userData">-->
                <!--<div class="distinct-top clearfix">-->
                <!--<span>-->
                <!--<img src="@/images/distinct-icon1.png" alt="">-->
                <!--用户等级 <em>LV{{ userData.user_level }}</em>-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="distinct-top clearfix">-->
                <!--<span>-->
                <!--<img src="@/images/distinct-icon2.png" alt="">-->
                <!--任务积分 <em>{{ userData.user_credit }}</em>-->
                <!--</span>-->
                <!--</div>-->
                <!--<div class="distinct-top distinct-bottom clearfix">-->
                <!--<span>-->
                <!--<img src="@/images/distinct-icon3.png" alt="">-->
                <!--等级特权-->
                <!--<i>佣金排序区间{{ userData.price_min }} ~ {{ userData.price_max }}</i>-->
                <!--<i>任务去重</i>-->
                <!--</span>-->
                <!--</div>-->

                <!--</div>-->
                <!--</template>-->
            </my-load-more>
        </div>
        <div class="distinct-bottom">
            <label for="distinct" class="distinct-label"><input type="checkbox" v-model="distinct"
                                                                @click="distinctFun(distinct = !distinct)"
                                                                id="distinct"><i><em v-if="!distinct">任务去重</em><em
                v-else>已去重</em></i></label>
        </div>
    </div>

</template>

<script>
    import api from '../../utils/api';
    import GetQuery from '../../utils/sign';
    // import MeScroll from 'mescroll.js';
    // import 'mescroll.js/mescroll.min.css';
    import _ from 'lodash';
    import VueBetterScroll from 'vue2-better-scroll'
    import MyLoadMore from '../components/MyLoadMore'

    export default {
        name: 'List',
        data() {
            return {
                mescroll: null,
                page: 0,
                type: 0,
                tasks: [],
                types: [
                    {
                        name: '全部',
                        val: '0'
                    }, {
                        name: '回访',
                        val: '10'
                    }, {
                        name: '搜索',
                        val: '1'
                    }, {
                        name: '直通车',
                        val: '2'
                    }, {
                        name: '二维码',
                        val: '3'
                    }, {
                        name: '聚划算',
                        val: '4'
                    }, {
                        name: '淘抢购',
                        val: '5'
                    }, {
                        name: '淘口令',
                        val: '6'
                    }, {
                        name: '大型活动',
                        val: '7'
                    }, {
                        name: '自定义任务',
                        val: '8'
                    }, {
                        name: '红包任务',
                        val: '9'
                    }
                ],
                consumer_id: 0,
                activeName: '',
                consumersTab: [],
                allLoaded: false,
                screen: 0,
                is_newcomer: false,
                qiniu_domain: localStorage.getItem('qiniu_domain'),
                message: [],
                time: false,
                loadbotHeight: true,
                sort: false,
                distinct: false,
                typesname: false,
                userData: false,
                credit_multiple: false, // 推荐积分
                finish_work_credit: false, // 积分
                sort_credit: false, //是否是推荐任务,
                lottery_min_recommend_get: localStorage.getItem('lottery_min_recommend_get'),
                lottery_min_recommend_get_number: localStorage.getItem('lottery_min_recommend_get_number'),
                platform_id: this.$route.query.platform_id,
                returnTure: false,
                mySwiper: false,
                returnTureas: false,
                is_length:false,
                height_scoll:'auto',
                clickTime: true
            }
        },
        components: {
            VueBetterScroll,
            MyLoadMore
        },
        async created() {
            this.credit_multiple = parseInt(localStorage.getItem('credit_multiple'))
            this.finish_work_credit = parseInt(localStorage.getItem('finish_work_credit'))
            // this.$route.params.is_newcomer == 0 ? this.is_newcomer = false : this.is_newcomer = true;
            this.is_newcomer = this.$route.params.is_newcomer;

            // this.consumer_id = localStorage.getItem('consumersId')

            let consumers = await api.request('/consumers/normal', 'get', {'platform_id': this.platform_id})
            this.consumersTab = consumers.data.data;
            this.consumer_id = this.consumersTab[0].consumer_id;
            // localStorage.setItem('consumersId',consumers.data.data[0].consumer_id);


        },
        mounted() {
            // 第一个高亮
            if (this.$route.query.type) {
                this.activeName = this.$route.query.type.split('?')[0];
                this.type = this.$route.query.type.split('?')[0];
                // for (let i in this.types) {
                //     if (this.types[i].val == GetQuery.GetQueryString('type').split('?')[0]) {
                //         this.activeName = this.types[i];
                //     }
                // }
            } else {
                this.activeName = 0;
                this.type = 0
            }
        },
        methods: {
            Swiper() {
                // 滑动组件
                this.mySwiper = new Swiper('.swiper1', {
                    slidesPerView: 5,
                    onTransitionEnd: function (swiper) {
                        if (swiper.progress == 1) {
                            swiper.activeIndex = swiper.slides.length - 1
                        }
                    }
                });
                if (!this.returnTureas && this.is_newcomer != 1) {
                    for (let types in this.typesname) {
                        if (this.typesname[types].tag == 'return' && this.typesname[types].num >= 1) {
                            this.returnTureas = this.typesname[types].num
                            // this.mySwiper.slideTo(types, 300, false)
                            // this.setData(this.typesname[types].type, this.typesname[types], this.typesname[types].tag, 99)
                        }
                    }
                }
            },
            mySwiperFun(inx) {
                this.mySwiper.slideTo(inx, 300, false)
            },
            // 刷新数量
            workNums() {
                var url = '/workNums';
                if (this.is_newcomer == 2) {
                    url = '/cross_platform/workNums'
                }
                api.request(url, 'get', {
                    'consumer_id': this.consumer_id,
                    'platform_id': this.platform_id
                }).then((resp) => {
                    this.typesname = resp.data.data;
                    this.userData = resp.data.message;
                    this.$nextTick(() => {
                        this.Swiper()
                    })
                })
            },
            loadBottom(distinctType = false) {
                this.workNums()
                if (distinctType) {
                    this.page = 0;
                    this.tasks = []
                }
                var url = '/works';
                let params = {
                    consumer_id: this.consumer_id,
                    page: this.page,
                    sort: this.sort,
                    platform_id: this.platform_id
                }
                if (this.is_newcomer == 1) {
                    params.is_newcomer = true
                } else if (this.is_newcomer == 0 || this.is_newcomer == 2) {
                    params.type = this.type
                }
                if (this.is_newcomer == 2) {
                    url = '/cross_platform/works'
                }
                if (this.returnTure) {
                    url = '/returnWorks'
                }
                api.request(url, 'get', params).then((resp) => {
                    let arr = resp.data.data;
                    if (arr.length >= 1) {
                        this.page = arr[arr.length - 1]._id;
                        if (arr[arr.length - 1].list) {
                            this.sort = arr[arr.length - 1].list.sort;
                        } else {
                            this.sort = false
                        }
                        if (this.sort) {
                            if (this.distinct && !this.returnTure) {
                                this.tasks = _.unionBy(this.tasks.concat(arr), t => {
                                    return t.list.goods_title
                                })
                            } else {
                                this.tasks = this.tasks.concat(arr);
                            }

                        }

                        if (this.loadbotHeight) {
                            this.$nextTick(() => {
                                this.cilenHeight()
                                this.loadbotHeight = false
                            })
                        }

                        if(this.tasks.length >= 1){   // 是否显示暂无数据
                            this.is_length = false;
                            this.height_scoll = 'auto'
                        }else{
                            this.is_length = true
                            this.height_scoll = '80vh'
                        }
                        this.$refs.loadmore.onBottomLoaded();
                    } else {
                        this.$refs.loadmore.onBottomLoaded();
                    }


                    this.message = resp.data.message;


                })
            },
            loadTop(typeData, type) {

                this.workNums()
                if (!type) {
                    type = this.type
                }
                var url = '/works'
                let params = {
                    consumer_id: this.consumer_id,
                    page: 0,
                    platform_id: this.platform_id
                }
                if (this.is_newcomer == 1) {
                    params.is_newcomer = true
                } else if (this.is_newcomer == 0) {
                    params.type = type
                }
                if (this.returnTure) {
                    url = '/returnWorks'
                    this.tasks = [];
                }
                if (this.is_newcomer == 2) {
                    url = '/cross_platform/works'
                }
                api.request(url, 'get', params).then((resp) => {
                    let arr = resp.data.data;
                    if(arr.length > 0){   // 是否显示暂无数据
                        this.is_length = false;
                        this.height_scoll = 'auto'
                    }else{
                        this.is_length = true
                        this.height_scoll = '80vh'
                    }
                    this.tasks = [];

                    this.type = type;
                    if (arr.length >= 1) {
                        this.page = arr[arr.length - 1]._id;
                        if (arr[arr.length - 1].list) {
                            this.sort = arr[arr.length - 1].list.sort;
                        }
                        if (this.distinct && !this.returnTure) {
                            this.tasks = _.unionBy(arr, t => {
                                return t.list.goods_title
                            })
                        } else {
                            this.tasks = arr;
                        }
                        this.$refs.loadmore.onTopLoaded();
                    } else {
                        this.$refs.loadmore.onTopLoaded();
                    }
                })
            },
            get(object, path, defaultValue) {
                return _.get(...arguments);
            },
            // 获取任务列表
            async setData(type = 0, typeData, tag, index) {
                this.activeName = type
                this.type = type

                var inx = index - 1
                if (inx >= -1 && index != 99) {
                    this.mySwiperFun(inx)
                }

                if (tag == 'return') {
                    this.returnTure = true
                } else {
                    this.returnTure = false
                }
                this.loadTop(typeData, type)
            },
            // 领取任务
            async submit(work_id, type = false) {
                var crossType = false;
                var that = this;


                if(!that.clickTime){
                    setTimeout(function (){
                        that.clickTime = true
                    },800)
                    return false;
                }
                that.clickTime = false;
                let param = {
                    consumer_id: this.consumer_id
                }
                var url = '/works/create'
                if (this.returnTure) {
                    param.job_id = work_id
                    url = '/works/returnCreate'
                } else {
                    param.work_id = work_id;
                    url = '/works/create'
                }

                if (this.is_newcomer == 2) {
                    url = '/cross_platform/create';
                    crossType = true
                }
                let resp = await api.request(url, 'post', param)
                let id = resp.data.data.work_user_id

                var path = `/task/detail/${id}`

                if(type) {
                    if (type.indexOf('自定义') != -1) {
                        path = `/task/detailCustom/${id}`
                    }
                }

                this.$router.push({
                    path: path,
                })
            },
            timeDown() {
                const endTime = new Date(this.endTime)
                const nowTime = new Date();
                let time = '';
                let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
                let d = parseInt(leftTime / (24 * 60 * 60))
                let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
                let m = this.formate(parseInt(leftTime / 60 % 60))
                let s = this.formate(parseInt(leftTime % 60))
                if (leftTime <= 0) {
                    this.flag = true;
                    return false;
                }
                d != 0 ? time += d + '天' : '';
                h != 0 ? time += h + '小时' : '';
                m != 0 ? time += m + '分' : '';
                this.time = time + s + '秒'
            },
            formate(time) {
                if (time >= 10) {
                    return time
                } else {
                    return `0${time}`
                }
            },
            cilenHeight() {
                let title = document.getElementById('sell-height').clientHeight;
                // let date = document.getElementById('sell-height2').clientHeight;
                let Height = title
                if (this.is_newcomer == 0) {
                    var nav = document.getElementById('sell-height1').clientHeight;
                    Height += nav
                }
                this.screen = (window.screen.height - Height) - 40 + 'px';
                this.$nextTick(() => {
                    document.querySelector('.mutlist').scrollTop = 0
                })
            },
            formatStr(str) {
                var head = str.substring(0, 5, str.length);
                var last = str.substring(5, str.length);
                return head + '*'.repeat(last.length);
            },

            distinctFun(val) {
                this.loadBottom(true)
            },
            toastdata(user_money, sort) {
                var jf = 0
                if (sort == '1000000000') {
                    jf = this.finish_work_credit
                } else {
                    jf = this.credit_multiple
                }
                this.$toast('佣金：' + user_money + '　　积分：' + jf)
            }
        },
        watch: {
            async consumer_id(newValue) {
                localStorage.setItem('consumersId', newValue);
                this.cilenHeight()
                this.sort = false;
                this.page = 0;
                this.tasks = []
                this.loadBottom()
                console.log(1)
            }
        }
    }
</script>
<style scoped>
    #consumersTab {
        position: absolute;
        right: .5rem;
        top: 0.3rem;
        width: 3rem;
        border: 0;
        background: transparent;
        color: #fff;
        border: 1px solid #fff;
        outline: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 0.1rem;
    }

    #consumersTab option {
        background: #fff;
        color: #000;
    }

    .mutlist_body {
        box-sizing: border-box;
        padding: .2rem 0;
        padding-bottom: 1.5rem;
    }

    .Head-nocome li {
        float: left;
        font-size: .3rem;
        padding-left: .5rem;
        padding-top: 0.05rem;
    }

    .Head-nocome p {
        font-size: .3rem;
        background: #FFEB6E;
        color: #000;
        padding: .01rem .2rem;
        border-radius: .2rem;
        position: relative;
        line-height: .55rem;
        box-sizing: border-box;
    }

    /*.Head-nocome p:before {*/
    /*width: 0;*/
    /*height: 0;*/
    /*content: '';*/
    /*display: inline-block;*/
    /*border-top: .1rem solid transparent;*/
    /*border-right: .2rem solid #FFEB6E;*/
    /*border-bottom: .1rem solid transparent;*/
    /*position: absolute;*/
    /*left: -.4rem;*/
    /*top: -.1rem;*/

    /*}*/

    .Head-nocome {
        padding: 0rem .2rem
    }

    .swiper1 {
        margin: 0;
        height: 1rem;
        line-height: 1rem;
    }

    .Head-nocome-right {
        line-height: .6rem;
        margin-top: .15rem;
    }

    .active-return {
        color: red;
        border-bottom: 0.05rem solid red;
    }

    .returnLogo {
        width: 60%;
        display: block;
        margin: 1rem auto;
    }

    .swiper1 .swiper-slide p {
        font-weight: 600;
        font-size: .4rem;
        line-height: 0.5rem;
        height: auto;
        font-weight: 400;
        padding-top: 0.4rem
    }

    .swiper1 .swiper-slide p.numbertype {
        font-size: 0.4rem;
        padding-top: 0rem;
    }

    .swiper1 {
        height: 1.3rem;
        background: #fff;
    }

    .swiper1 .swiper-slide {
        height: 1.2rem;
    }

    .swiper1 .swiper-slide.active {
        border-bottom: 0.05rem solid #FF9815;
    }

    #distinct-body {
        background: #fff;
        color: #fff;
        /*position: fixed;*/
        padding: .2rem 0.2rem;
        z-index: 30;
        font-size: .3rem;
        width: 100%;
        box-sizing: border-box;
        bottom: 0;
    }

    #distinct-body .distinct-top {
        color: #999;
        text-align: left;
        line-height: 0.5rem;
        margin-top: 0.1rem;
    }

    #distinct-body .distinct-top img {
        width: 0.4rem;
        vertical-align: middle;
        display: inline-block;
        margin-top: -0.1rem;
    }

    #distinct-body .distinct-top em {
        color: #FF9815;
    }

    #distinct-body .distinct-bottom i {
        background: #A1D0FF;
        color: #fff;
        border-radius: 0.05rem;
        padding: 0.05rem 0.2rem;
        padding-top: 0.1rem;
        font-size: 0.01rem
    }

    /*.distinct-label {*/
    /*background: rgba(255, 255, 255, .9);*/
    /*position: fixed;*/
    /*bottom: .2rem;*/
    /*left: .2rem;*/
    /*padding: .15rem .3rem;*/
    /*border-radius: .2rem;*/
    /*color: #000;*/
    /*z-index: 9999;*/
    /*font-weight: 600;*/
    /*font-size: .4rem;*/
    /*-webkit-box-shadow: 0 0 0.2rem #0CA3F9;*/
    /*box-shadow: 0 0 0.2rem #0CA3F9;*/
    /*}*/

    .distinct-label input {
        display: none;
    }

    .distinct-label em {
        color: #FF9815;
        font-weight: 600;
    }

    /*#distinct-body em {*/
    /*color: #FF9815;*/
    /*}*/
    /*#distinct-body input {*/
    /*margin: 0;*/
    /*vertical-align: top;*/
    /*width: .5rem;*/
    /*height: .5rem;*/
    /*margin-right: .1rem;*/
    /*}*/
    .header {
        text-align: left;
        padding-left: 1rem;
    }

    .header .lv {
        background: #fff;
        color: #FF9815;
        font-size: 0.2rem;
        padding: 0 .3rem;
        padding-top: 0.03rem;
        border-radius: 0.1rem;
        margin-left: 0.2rem;
    }

    .distinct-bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #ddd;
        box-shadow: 0 0 .1rem #ddd;
        padding: .2rem;
        font-size: .4rem;
        box-sizing: border-box;
        background: #fff;
        text-align: right;
        z-index: 999;
    }

    /*.distinct-bottom .distinct-label {*/
    /*float: right;*/
    /*}*/
    .distinct-bottom .user_level em {
        color: #FF9815;
        font-weight: 400;
    }

    .returnTureas {
        padding: .1rem .4rem;
        color: #fff;
        background: #E93422;
        text-align: center;
        font-size: .3rem
    }
</style>
